<template>
	<!-- 
    投资者关系
  信息公告
   -->
	<div class="wrap">
		<!-- 标题 -->
		<div class="title">
			<p>信息公告</p>
		</div>
		<!-- 公司股价 -->
		<div class="price con">
			<p class="tit">公司股价</p>
			<div
				@mouseenter="changeBg('pricebg')"
				@mouseleave="changeBg('pricebg')"
				:class="{ bgW: !pricebg, bgB: pricebg }"
				class="price_content"
			>
				<p class="blue">
					<span>蓝月亮集团</span>
					<span>06993</span>
				</p>
				<!-- 中间 -->
				<div class="price_middle flex">
					<div class="left blue">
						<span class="span1 wr">6.05</span>
						<span class="span2">+0.09 (+1.51%)</span>
					</div>
					<div class="right blue flex">
						<div>
							<p class="p1">最高</p>
							<p class="wr">6.10</p>
						</div>
						<div>
							<p class="p1">最低</p>
							<p class="wr">5.75</p>
						</div>
						<div>
							<p class="p1">成交量（手）</p>
							<p class="wr">10503315</p>
						</div>
						<div>
							<p class="p1">成交额（万元）</p>
							<p class="wr">6228.72</p>
						</div>
					</div>
				</div>
				<div class="price_bottom blue">
					<span>截至2021-08-20 16:01北京时间</span>
					<span>*报价有十五分钟以上延迟 资料来源：新浪财经</span>
				</div>
			</div>
		</div>
		<!-- 公司公告 -->
		<div class="notice con">
			<p class="tit">公司公告</p>
			<div class="box21">
				<p>2021年</p>
				<!-- 列表 -->
				<div
					v-for="(v, i) in list21"
					:key="i"
					class="flex item"
					@mouseenter="changeBg('libg', i)"
					@mouseleave="changeBg('libg', i)"
					:class="{ bgW: !libg, bgB: libg && show == i }"
				>
					<div class="left">{{ v.time }}</div>
					<div class="center">{{ v.text }}</div>
					<div class="right">
						<img :src="libg && show == i ? imgb : imgw" />
					</div>
				</div>
			</div>
			<!--  -->

			<div class="box21">
				<p>2020年</p>
				<!-- 列表 -->
				<div
					v-for="(v, i) in list20"
					:key="i"
					class="flex item"
					@mouseenter="changeBg('libg2', i)"
					@mouseleave="changeBg('libg2', i)"
					:class="{ bgW: !libg2, bgB: libg2 && show2 == i }"
				>
					<div class="left">{{ v.time }}</div>
					<div class="center">{{ v.text }}</div>
					<div class="right">
						<img :src="libg2 && show2 == i ? imgb : imgw" />
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			pricebg: false,
			libg: false,
			show: '',
			libg2: false,
			show2: '',
			// 下载图片
			imgw: require('./img/message/下载W.png'),
			imgb: require('./img/message/下载B.png'),
			// 2021
			list21: [
				{
					time: '2021.08.10',
					text:
						'公告及通告 - [杂项-其他-业务发展最新情况] - 自愿性公告 -  战略合作协议之签订',
				},
				{
					time: '2021.08.13',
					text: '月报表 - 截至2021年5月31日止月份之股份发行人的证券变动月报表',
				},
				{
					time: '2021.08.22',
					text: '公告及通告 - [董事会召开日期] - 董事会会议通告',
				},
				{
					time: '2021.08.10',
					text:
						'公告及通告 - [杂项-其他-业务发展最新情况] - 自愿性公告 -  战略合作协议之签订',
				},
				{
					time: '2021.08.13',
					text: '月报表 - 截至2021年5月31日止月份之股份发行人的证券变动月报表',
				},
				{
					time: '2021.08.22',
					text: '公告及通告 - [董事会召开日期] - 董事会会议通告',
				},
				{
					time: '2021.08.10',
					text:
						'公告及通告 - [杂项-其他-业务发展最新情况] - 自愿性公告 -  战略合作协议之签订',
				},
				{
					time: '2021.08.13',
					text: '月报表 - 截至2021年5月31日止月份之股份发行人的证券变动月报表',
				},
				{
					time: '2021.08.22',
					text: '公告及通告 - [董事会召开日期] - 董事会会议通告',
				},
				{
					time: '2021.08.10',
					text:
						'公告及通告 - [杂项-其他-业务发展最新情况] - 自愿性公告 -  战略合作协议之签订',
				},
				{
					time: '2021.08.13',
					text: '月报表 - 截至2021年5月31日止月份之股份发行人的证券变动月报表',
				},
				{
					time: '2021.08.22',
					text: '公告及通告 - [董事会召开日期] - 董事会会议通告',
				},
			],
			// 2020
			list20: [
				{
					time: '2021.08.10',
					text:
						'公告及通告 - [杂项-其他-业务发展最新情况] - 自愿性公告 -  战略合作协议之签订',
				},
				{
					time: '2021.08.13',
					text: '月报表 - 截至2021年5月31日止月份之股份发行人的证券变动月报表',
				},
				{
					time: '2021.08.22',
					text: '公告及通告 - [董事会召开日期] - 董事会会议通告',
				},
				{
					time: '2021.08.10',
					text:
						'公告及通告 - [杂项-其他-业务发展最新情况] - 自愿性公告 -  战略合作协议之签订',
				},
				{
					time: '2021.08.13',
					text: '月报表 - 截至2021年5月31日止月份之股份发行人的证券变动月报表',
				},
				{
					time: '2021.08.22',
					text: '公告及通告 - [董事会召开日期] - 董事会会议通告',
				},
				{
					time: '2021.08.10',
					text:
						'公告及通告 - [杂项-其他-业务发展最新情况] - 自愿性公告 -  战略合作协议之签订',
				},
				{
					time: '2021.08.13',
					text: '月报表 - 截至2021年5月31日止月份之股份发行人的证券变动月报表',
				},
				{
					time: '2021.08.22',
					text: '公告及通告 - [董事会召开日期] - 董事会会议通告',
				},
				{
					time: '2021.08.10',
					text:
						'公告及通告 - [杂项-其他-业务发展最新情况] - 自愿性公告 -  战略合作协议之签订',
				},
				{
					time: '2021.08.13',
					text: '月报表 - 截至2021年5月31日止月份之股份发行人的证券变动月报表',
				},
				{
					time: '2021.08.22',
					text: '公告及通告 - [董事会召开日期] - 董事会会议通告',
				},
			],
		}
	},
	methods: {
		changeBg(type, index) {
			if (type === 'pricebg') {
				this.pricebg = !this.pricebg
			}
			if (type === 'libg') {
				this.show = index
				this.libg = !this.libg
			}
			if (type === 'libg2') {
				this.show2 = index
				this.libg2 = !this.libg2
			}
		},
	},
}
</script>

<style lang="scss" scoped>
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
ul > li {
	list-style: none;
}
.flex {
	display: flex;
}

.con {
	width: 86%;
	margin: 0 auto;
}
.wrap {
	width: 100%;
	// 标题
	.title {
		width: 100%;
		height: 445px;
		background: url('./img/message/ia_100000000365.jpg') no-repeat;
		background-size: 100%;
		margin-bottom: 50px;
		& > img {
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}
		& > p {
			position: absolute;
			right: 0;
			left: 0;
			top: 200px;
			text-align: center;
			color: #fff;
			margin: auto;
			line-height: 0.41rem;
			font-weight: 700;
			text-shadow: 0 2px 12px rgb(0 0 0 / 32%);
			font-size: 26px;
			z-index: 10;
			&::before {
				content: '';
				position: absolute;
				top: 5px;
				left: 680px;
				width: 40px;
				height: 1px;
				background: #fff;
			}
			&::after {
				content: '';
				position: absolute;
				top: 5px;
				right: 680px;
				width: 40px;
				height: 1px;
				background: #fff;
			}
		}
	}
	.tit {
		color: #1d3e97;
		font-weight: 500;
		font-size: 50px;
		margin-bottom: 68px;
	}
	//公司股价
	.price {
		margin-bottom: 100px;
		.bgW {
			background: url('./img/message/bgW.png') no-repeat;
			background-size: 100% 100%;
			.wr {
				color: #1d3e97;
				font-size: 22px;
			}
		}
		.bgB {
			background: url('./img/message/bgB.png') no-repeat;
			background-size: 100% 100%;
			.blue {
				color: #fff;
			}
			.wr {
				color: #fff;
				font-size: 22px;
			}
		}
		.price_content {
			width: 100%;
			height: 300px;
			padding: 55px;
			font-weight: 100;
			color: #666666;
			& > p {
				color: #666666;
				font-size: 22px;
				margin-bottom: 37px;
				& > span {
					margin-right: 20px;
				}
			}
			// 中间
			.price_middle {
				width: 100%;
				justify-content: space-between;
				.left {
					width: 45%;
					padding-top: 20px;
					.span1 {
						font-size: 30px;
						margin-right: 20px;
					}
				}
				.right {
					width: 55%;
					justify-content: space-between;
					font-size: 14px;
					& > div > .p1 {
						margin-bottom: 10px;
					}
				}
			}
			//
			.price_bottom {
				font-size: 12px;
				margin-top: 37px;
				span {
					margin-right: 20px;
				}
			}
		}
	}
	//公司公告
	.notice {
		margin-bottom: 100px;
		.box21 {
			width: 100%;
			& > p {
				width: 100%;
				text-align: center;
				font-size: 24px;
				margin: 30px 0 20px;
				font-weight: 100;
			}
			.bgB {
				color: #fff;
				background-color: #1d3e97;
			}
			.bgW {
				color: #666660;
				background-color: #f7f7f7;
			}
			.item {
				width: 100%;
				height: 78px;
				font-size: 18px;
				justify-content: space-between;
				align-items: center;
				text-align: center;
				cursor: pointer;
				border-bottom: 1px solid #fff;
				.left {
					width: 22.5%;
					height: 100%;
					text-align: center;
					border-right: 1px solid #fff;
					line-height: 78px;
				}
				.center {
					width: 67.5%;
					height: 100%;
					text-align: center;
					line-height: 78px;
				}
				.right {
					width: 10%;
					height: 100%;
					padding-top: 20px;
					text-align: right;
					img {
						width: 30px;
						margin-right: 30px;
					}
				}
			}
		}
	}
}
</style>